Add files via upload

tronbeing3030 · Sep 23, 2024 · 54f89c3 · 54f89c3
1 parent 64c785f
commit 54f89c3
Show file tree

Hide file tree

Showing 4 changed files with 244 additions and 0 deletions.
diff --git a/app.js b/app.js
@@ -0,0 +1,19 @@
+const inputBox = document.getElementById('input-box');
+const listContainer = document.getElementById('list-container');
+
+function newlist() {
+    if (inputBox.value === "") {
+    }
+    else {
+        let li = document.createElement('li');
+        li.innerHTML = inputBox.value;
+        li.style.fontSize = "1.1rem";
+        listContainer.appendChild(li);
+    }
+    inputBox.value = "";
+};
+
+function del() {
+    listContainer.removeChild(listContainer.lastChild);
+    // alert("Working!!!");
+}
diff --git a/image.jpg b/image.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>List</title>
+    <link rel="stylesheet" href="styles.css">
+    </link>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
+        rel="stylesheet">
+</head>
+
+<body>
+    <div class="container">
+        <div class="left">
+            <form class="form">
+                <div class="heading">
+                    <p><b>ENTER ITEMS</b></p>
+                </div>
+                <div class="input">
+                    <input type="text" id="input-box" placeholder="Enter items" required>
+                </div>
+                <div class="add">
+                    <button id="add" onclick="newlist()">Add to cart &#43</button>
+                </div>
+            </form>
+        </div>
+        <div class="right">
+            <p><b>LIST OF ITEMS</b></p>
+
+            <div class="list">
+                <div id="lists">
+                    <ol id="list-container">
+                        <!-- lists come over here! -->
+                    </ol>
+                </div>
+            </div>
+
+            <div class="r-buttons">
+                <div class="delete">
+                    <button class="del" onclick="del()">Delete</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="app.js"></script>
+
+</body>
+
+</html>
diff --git a/styles.css b/styles.css
@@ -0,0 +1,171 @@
+* {
+    font-family: 'Montserrat','SF Pro Display', sans-serif;
+}
+
+html{
+    background-color: #073b4c;
+}
+
+body {
+    margin: 0;
+}
+
+.container {
+    display: flex;
+}
+
+.left {
+    display: flex;
+    background: url(image.jpg), no-repeat;
+    background-size: cover;
+    width: 50%;
+    height: 100vh;
+    align-items: center;
+    justify-content: center;
+}
+
+.right {
+    background: #073b4c;
+    width: 50%;
+    height: 100vh;
+    align-self: center;
+    justify-items: center;
+    color: white;
+}
+
+form {
+    width: 100%;
+    background: none;
+}
+
+.heading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: .5em 1em;
+}
+
+.heading p {
+    margin: 0px;
+    text-align: center;
+    font-size: 3.5rem;
+    color: #01161e;
+    padding-top: 1.1em auto 0 auto;
+}
+
+.input {
+    padding: 1.1em;
+    align-items: center;
+    text-align: center;
+}
+
+input {
+    width: 90%;
+    height: 2em;
+    color: #FFFFFF;
+    background-color: #001219;
+    border: none;
+    border-radius: 50px;
+    padding: .5em .5em .5em 1.2em;
+    font-size: 1.2rem;
+}
+
+input::placeholder {
+    padding: 0;
+    color: #FFFFFF;
+}
+
+.add {
+    display: grid;
+    padding: 1em;
+    justify-content: center;
+    align-items: center;
+    box-shadow: none;
+}
+
+#add {
+    align-self: center;
+    display: block;
+    width: 10em;
+    height: 2.3em;
+    padding: 0 1.1em;
+    background-color: #01161e;
+    color: #fff;
+    border-style: solid;
+    border-radius: 5em;
+    font-size: 1.5rem;
+    font-weight: 500;
+    text-align: center;
+}
+
+#add:hover {
+    cursor: pointer;
+    color: #053444;
+    font-weight: 500;
+    background: none;
+    backdrop-filter: blur(.2em);
+    border-style: solid;
+    transition: 0.25s;
+}
+
+.right p {
+    text-align: center;
+    font-size: 2rem;
+}
+
+.list {
+    padding-left: 2em;
+    text-align: left;
+    font-size: 2rem;
+}
+
+.r-buttons {
+    display: grid;
+    text-align: center;
+}
+
+.del {
+    width: 40%;
+    height: 2.5em;
+    color: #ef233c;
+    text-align: center;
+    font-size: 1.2rem;
+    font-weight: 600;
+    border-radius: 5em;
+    border-color: #ef233c;
+    border-style: solid;
+    background: none;
+    margin: 0 0 1.5em 0;
+}
+
+.del:hover {
+    background: #ef233c;
+    color: #073b4c;
+    transition: 0.25s;
+}
+
+@media (max-width: 700px) {
+    .container{
+        flex-direction: column;
+    }
+    .left{
+        width: 100%;
+        height: 50vh;
+    }
+    .right{
+        width: 100%;
+        height: 100%;
+    }
+    form{
+        padding-top: 1em;
+    }
+    .heading p{
+        font-size: 2.5rem;
+    }
+    #add{
+        font-size: 1rem;
+    }
+    .list-container{
+        font-size: 1rem;
+    }
+}