read more with class

LaimaLP · Nov 6, 2023 · f33e1c5 · f33e1c5
1 parent 0a7fc36
commit f33e1c5
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 0 deletions.
diff --git a/CSS/main.css b/CSS/main.css
@@ -0,0 +1,42 @@
+body{
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    text-align: justify;
+    max-width: 600px;
+    margin: auto;
+    background-color: rgb(219, 216, 216);
+}
+.text-container{
+       margin-top: 20px;    
+       background-color: rgb(234, 245, 245);
+     position: relative;
+     border: 2px solid grey;
+     padding: 0 30px;
+    border-radius: 20px;
+
+}
+.text{
+    font-size: 24px;
+
+}
+.more-text{
+    display: none;
+
+}
+.read-more-btn{
+    font-weight: 600;
+    color: rgb(30, 30, 105);
+    padding: 10px 10px;
+    border-radius: 10px;
+    border: 1px solid rgb(94, 93, 93);
+    position: absolute;
+    right: 1%;
+    bottom: 2%;
+    cursor: pointer;
+
+}
+.text.show-more .more-text{
+    display: inline;
+}
+.text.show-more .dots{
+    display: none;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Read more or Less</title>
+    <link rel="stylesheet" href="./CSS/main.css">
+</head>
+<body>
+    <div>
+        <div class="text-container">
+            <p class ="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit perferendis ipsa, qui non minus minima. Delectus, fugit minus consequatur placeat, reiciendis nulla totam tempore nam omnis aliquid corrupti expedita sapiente laboriosam voluptatum alias deleniti assumenda veritatis consectetur doloribus voluptatibus minima ullam optio. <span class="dots">...</span> <span class="more-text">Architecto vero a quis libero quisquam fugit. Non sit pariatur recusandae dolores quam consequatur mollitia itaque magnam eius, beatae ducimus veritatis vel tempore ex id, ea reiciendis et molestiae illo maiores. Ullam maxime, officia quos voluptate quis eos laboriosam enim nisi autem nesciunt pariatur maiores quae molestiae voluptates aperiam quidem hic est, et nulla culpa quibusdam soluta alias? Illo earum numquam facere delectus quas magni reiciendis praesentium? Numquam facere necessitatibus cum illo ipsa, facilis optio earum eaque officiis libero quam recusandae eum excepturi similique quidem tempore corrupti minus culpa modi quas ab atque fuga eveniet! Nulla, eum? Iure deserunt atque illo fuga accusamus quidem laboriosam commodi, obcaecati consequatur!</span></p>
+            <button class="read-more-btn">Read More</button>
+        </div>
+        <script src="./script.js"></script>
+    </div>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -4,6 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
+    "dev": "dead-server --host=localhost --port=0010",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],

diff --git a/script.js b/script.js
@@ -0,0 +1,12 @@
+console.log("labas")
+const readMoreBtn = document.querySelector(".read-more-btn");
+const text = document.querySelector(".text");
+
+readMoreBtn.addEventListener("click", (e)=>{
+    text.classList.toggle("show-more");
+    if(readMoreBtn.innerText === "Read More"){
+        readMoreBtn.innerText = "Read Less";
+    }else{
+        readMoreBtn.innerText = "Read More";
+    }
+})