├── README.md
├── index.html
├── script.js
└── style.css


/README.md:
--------------------------------------------------------------------------------
  1 | # DOMmanipulation
  2 | This small To Do list was created to practice DOM manipulation.
  3 | 
  4 | 
  5 | <a name="readme-top"></a>
  6 | 
  7 | <!--
  8 | HOW TO USE:
  9 | This is an example of how you may give instructions on setting up your project locally.
 10 | 
 11 | Modify this file to match your project and remove sections that don't apply.
 12 | 
 13 | REQUIRED SECTIONS:
 14 | - Table of Contents
 15 | - About the Project
 16 |   - Built With
 17 |   - Live Demo
 18 | - Getting Started
 19 | - Authors
 20 | - Future Features
 21 | - Contributing
 22 | - Show your support
 23 | - Acknowledgements
 24 | - License
 25 | 
 26 | OPTIONAL SECTIONS:
 27 | - FAQ
 28 | 
 29 | After you're finished please remove all the comments and instructions!
 30 | -->
 31 | 
 32 | <div align="center">
 33 |   <!-- You are encouraged to replace this logo with your own! Otherwise you can also remove it. -->
 34 |   <img src="murple_logo.png" alt="logo" width="140"  height="auto" />
 35 |   <br/>
 36 | 
 37 |   <h3><b>Microverse README Template</b></h3>
 38 | 
 39 | </div>
 40 | 
 41 | <!-- TABLE OF CONTENTS -->
 42 | 
 43 | # 📗 Table of Contents
 44 | 
 45 | - [📖 About the Project](#about-project)
 46 |   - [🛠 Built With](#built-with)
 47 |     - [Tech Stack](#tech-stack)
 48 |     - [Key Features](#key-features)
 49 |   - [🚀 Live Demo](#live-demo)
 50 | - [💻 Getting Started](#getting-started)
 51 |   - [Setup](#setup)
 52 |   - [Prerequisites](#prerequisites)
 53 |   - [Install](#install)
 54 |   - [Usage](#usage)
 55 |   - [Run tests](#run-tests)
 56 |   - [Deployment](#triangular_flag_on_post-deployment)
 57 | - [👥 Authors](#authors)
 58 | - [🔭 Future Features](#future-features)
 59 | - [🤝 Contributing](#contributing)
 60 | - [⭐️ Show your support](#support)
 61 | - [🙏 Acknowledgements](#acknowledgements)
 62 | - [❓ FAQ (OPTIONAL)](#faq)
 63 | - [📝 License](#license)
 64 | 
 65 | <!-- PROJECT DESCRIPTION -->
 66 | 
 67 | # 📖 [your_project_name] <a name="about-project"></a>
 68 | 
 69 | > Describe your project in 1 or 2 sentences.
 70 | 
 71 | **[your_project__name]** is a...
 72 | 
 73 | ## 🛠 Built With <a name="built-with"></a>
 74 | 
 75 | ### Tech Stack <a name="tech-stack"></a>
 76 | 
 77 | > Describe the tech stack and include only the relevant sections that apply to your project.
 78 | 
 79 | <details>
 80 |   <summary>Client</summary>
 81 |   <ul>
 82 |     <li><a href="https://reactjs.org/">React.js</a></li>
 83 |   </ul>
 84 | </details>
 85 | 
 86 | <details>
 87 |   <summary>Server</summary>
 88 |   <ul>
 89 |     <li><a href="https://expressjs.com/">Express.js</a></li>
 90 |   </ul>
 91 | </details>
 92 | 
 93 | <details>
 94 | <summary>Database</summary>
 95 |   <ul>
 96 |     <li><a href="https://www.postgresql.org/">PostgreSQL</a></li>
 97 |   </ul>
 98 | </details>
 99 | 
100 | <!-- Features -->
101 | 
102 | ### Key Features <a name="key-features"></a>
103 | 
104 | > Describe between 1-3 key features of the application.
105 | 
106 | - **[key_feature_1]**
107 | - **[key_feature_2]**
108 | - **[key_feature_3]**
109 | 
110 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
111 | 
112 | <!-- LIVE DEMO -->
113 | 
114 | ## 🚀 Live Demo <a name="live-demo"></a>
115 | 
116 | > Add a link to your deployed project.
117 | 
118 | - [Live Demo Link](https://yourdeployedapplicationlink.com)
119 | 
120 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
121 | 
122 | <!-- GETTING STARTED -->
123 | 
124 | ## 💻 Getting Started <a name="getting-started"></a>
125 | 
126 | > Describe how a new developer could make use of your project.
127 | 
128 | To get a local copy up and running, follow these steps.
129 | 
130 | ### Prerequisites
131 | 
132 | In order to run this project you need:
133 | 
134 | <!--
135 | Example command:
136 | 
137 | ```sh
138 |  gem install rails
139 | ```
140 |  -->
141 | 
142 | ### Setup
143 | 
144 | Clone this repository to your desired folder:
145 | 
146 | <!--
147 | Example commands:
148 | 
149 | ```sh
150 |   cd my-folder
151 |   git clone git@github.com:myaccount/my-project.git
152 | ```
153 | --->
154 | 
155 | ### Install
156 | 
157 | Install this project with:
158 | 
159 | <!--
160 | Example command:
161 | 
162 | ```sh
163 |   cd my-project
164 |   gem install
165 | ```
166 | --->
167 | 
168 | ### Usage
169 | 
170 | To run the project, execute the following command:
171 | 
172 | <!--
173 | Example command:
174 | 
175 | ```sh
176 |   rails server
177 | ```
178 | --->
179 | 
180 | ### Run tests
181 | 
182 | To run tests, run the following command:
183 | 
184 | <!--
185 | Example command:
186 | 
187 | ```sh
188 |   bin/rails test test/models/article_test.rb
189 | ```
190 | --->
191 | 
192 | ### Deployment
193 | 
194 | You can deploy this project using:
195 | 
196 | <!--
197 | Example:
198 | 
199 | ```sh
200 | 
201 | ```
202 |  -->
203 | 
204 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
205 | 
206 | <!-- AUTHORS -->
207 | 
208 | ## 👥 Authors <a name="authors"></a>
209 | 
210 | > Mention all of the collaborators of this project.
211 | 
212 | 👤 **Author1**
213 | 
214 | - GitHub: [@githubhandle](https://github.com/githubhandle)
215 | - Twitter: [@twitterhandle](https://twitter.com/twitterhandle)
216 | - LinkedIn: [LinkedIn](https://linkedin.com/in/linkedinhandle)
217 | 
218 | 👤 **Author2**
219 | 
220 | - GitHub: [@githubhandle](https://github.com/githubhandle)
221 | - Twitter: [@twitterhandle](https://twitter.com/twitterhandle)
222 | - LinkedIn: [LinkedIn](https://linkedin.com/in/linkedinhandle)
223 | 
224 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
225 | 
226 | <!-- FUTURE FEATURES -->
227 | 
228 | ## 🔭 Future Features <a name="future-features"></a>
229 | 
230 | > Describe 1 - 3 features you will add to the project.
231 | 
232 | - [ ] **[new_feature_1]**
233 | - [ ] **[new_feature_2]**
234 | - [ ] **[new_feature_3]**
235 | 
236 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
237 | 
238 | <!-- CONTRIBUTING -->
239 | 
240 | ## 🤝 Contributing <a name="contributing"></a>
241 | 
242 | Contributions, issues, and feature requests are welcome!
243 | 
244 | Feel free to check the [issues page](../../issues/).
245 | 
246 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
247 | 
248 | <!-- SUPPORT -->
249 | 
250 | ## ⭐️ Show your support <a name="support"></a>
251 | 
252 | > Write a message to encourage readers to support your project
253 | 
254 | If you like this project...
255 | 
256 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
257 | 
258 | <!-- ACKNOWLEDGEMENTS -->
259 | 
260 | ## 🙏 Acknowledgments <a name="acknowledgements"></a>
261 | 
262 | > Give credit to everyone who inspired your codebase.
263 | 
264 | I would like to thank...
265 | 
266 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
267 | 
268 | <!-- FAQ (optional) -->
269 | 
270 | ## ❓ FAQ (OPTIONAL) <a name="faq"></a>
271 | 
272 | > Add at least 2 questions new developers would ask when they decide to use your project.
273 | 
274 | - **[Question_1]**
275 | 
276 |   - [Answer_1]
277 | 
278 | - **[Question_2]**
279 | 
280 |   - [Answer_2]
281 | 
282 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
283 | 
284 | <!-- LICENSE -->
285 | 
286 | ## 📝 License <a name="license"></a>
287 | 
288 | This project is [MIT](./LICENSE) licensed.
289 | 
290 | _NOTE: we recommend using the [MIT license](https://choosealicense.com/licenses/mit/) - you can set it up quickly by [using templates available on GitHub](https://docs.github.com/en/communities/setting-up-your-project-for-healthy-contributions/adding-a-license-to-a-repository). You can also use [any other license](https://choosealicense.com/licenses/) if you wish._
291 | 
292 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
293 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>Javascript + DOM </title>
 5 |     <link rel="stylesheet" type="text/css" href="style.css">
 6 | </head>
 7 | <body>
 8 |     <h1> To do list. </h1>
 9 |     <p id="first">Get it done with excellence.</p>
10 |     <p class="second">No excuses.</p>
11 |     <input id="userInput" type="text" placeholder="enter items">
12 |     <button id="enter">Enter</button>
13 |     <ul id="myList">
14 |         <li class="italic" random="23">Practice French1 <button class="delete">Delete</button></li>
15 | 
16 |         <li class="bold red" random="23">Practice French.</li>
17 |         <li>Practice English.<button class="delete">Delete</button></li>
18 |         <li>Do exercise.<button class="delete">Delete</button></li>
19 |         <li>Plan your day.<button class="delete">Delete</button></li>
20 |         <li>Take care of you love ones.<button class="delete">Delete</button></li>
21 |         <li>Do something that improves someone else's life.<button class="delete">Delete</button></li>
22 |     </ul>
23 |     <script type="text/javascript" src="script.js">
24 |     </script>
25 | </body>
26 | </html>


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
 1 | var button = document.getElementById("enter");
 2 | var input = document.getElementById("userInput");
 3 | var ul = document.querySelector("ul")
 4 | var deleteBtns = document.getElementsByClassName("delete");
 5 | var items = ul.getElementsByTagName("li");
 6 | 
 7 | 
 8 | 
 9 | //add event listener to first 6 btns in HTML file
10 | for(var i = 0; i < deleteBtns.length; i++){
11 | 	deleteBtns[i].addEventListener("click", removeParent, false);
12 | }
13 | 
14 | 
15 | //from StackOverflow:
16 | function removeParent(evt) {
17 |   evt.target.removeEventListener("click", removeParent, false);
18 |   evt.target.parentNode.remove();
19 | }
20 | 
21 | //click on a list item and it strikethroughs the text
22 | function lineThrough(event){
23 | 	var a=event.target;
24 | 	
25 | 	if(count==0)
26 | 	{
27 | 		
28 | 	    a.classList.add("done");
29 | 	}
30 | 	else
31 | 	{
32 | 		a.classList.toggle("done");
33 | 	}
34 | 	count++;
35 | 
36 | 
37 | }
38 | 
39 | ul.onclick = function(event){
40 | 	var target = getEventTarget(event);
41 | 	target.classList.toggle("done");
42 | }
43 | 
44 | 
45 | //adding new items:
46 | 
47 | function inputLength(){
48 | 	return input.value.length;
49 | }
50 | 
51 | function createListElement() {
52 | 	var btn = document.createElement("button");
53 | 	btn.innerHTML = "Delete";
54 | 	btn.onclick = removeParent;
55 | 
56 | 	var li = document.createElement("li");
57 | 	li.appendChild(document.createTextNode(input.value));
58 | 	li.innerHTML = li.innerHTML + " ";
59 | 	li.appendChild(btn);
60 | 
61 | 	ul.appendChild(li);
62 | 	input.value="";
63 | }
64 | 
65 | 
66 | function addToListAfterClick(){
67 | 	if(inputLength() > 0){
68 | 			createListElement();
69 | 		}
70 | }
71 | 
72 | function addToListAfterKeypress(event){
73 | 	if(inputLength() > 0 && event.keyCode === 13) {
74 | 		createListElement();
75 | 	}
76 | }
77 | 
78 | 
79 | button.addEventListener("click", addToListAfterClick);
80 | 
81 | input.addEventListener("keypress", addToListAfterKeypress);


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
 1 | .coolTitle {
 2 |   text-align: center;
 3 |   font-family: 'Oswald', Helvetica, sans-serif;
 4 |   font-size: 40px;
 5 |   transform: skewY(-10deg);
 6 |   letter-spacing: 4px;
 7 |   word-spacing: -8px;
 8 |   color: tomato;
 9 |   text-shadow: 
10 |     -1px -1px 0 firebrick,
11 |     -2px -2px 0 firebrick,
12 |     -3px -3px 0 firebrick,
13 |     -4px -4px 0 firebrick,
14 |     -5px -5px 0 firebrick,
15 |     -6px -6px 0 firebrick,
16 |     -7px -7px 0 firebrick,
17 |     -8px -8px 0 firebrick,
18 |     -30px 20px 40px dimgrey;
19 | }
20 | 
21 | .done {
22 |   text-decoration: line-through;
23 | }


--------------------------------------------------------------------------------