Awesome
Table of contents
-
- 1-Cookie Consent App
- 2-Shopping List App
- 3-Meme Picker App
- 4-Twitter Clone App
- 5-Restaurant Order App
Overview
Completed these projects that are parts of Scrimba's Essential JavaScript Concepts. I mastered HTML/CSS and intermediate JavaScript functions in these projects. You can see the visual representations of the each app below.
Projects
1-Cookie Consent App
Visulation of the App
Description
-
The project is created to take personal informations within the cookie consent.
What I Learned?
-
setTimeOut()
-
element.style
-
forms
-
FormData & get()
-
event.preventDefault()
-
CSS: row-reverse
-
toggling classes
-
disabled attribute
-
aria-label attribute
-
mouseenter event
2-Shopping List App
Visulation of the App
Description
-
The project is created to provide a list of shopping .
3-Meme Picker App
Live Link
Visulation of the App
Description
- The project is created to pick a cat GIF relevant with user's mood
Stretch Goals: Completed!
-
Click outside the modal to close modal
-
Display more than one result (thumbnails in a gallery)
-
Refactor the UX
What I Learned?
-
for of()
-
radio & checkbox
-
getElementsByClassName()
-
querySelector()
-
classList.add(), .remove()
-
import/export
-
includes()
-
filter()
-
event.target
-
mouseup event
-
window.addeventListener()
4-Twimba: Twitter Clone App
Live Link
Visulation of the App
Description
- The project provides a clone of Twitter using pure Javascript. Users can able;
-
Send a tweet to feed
-
List tweets' replies by clicking icon
-
Like an tweet
-
Retweet a tweet
-
What I Learned?
-
textarea
-
data-attributes
-
conditionally render style
-
Not operator (!)
-
CDNs(add icons using fontawesome)
-
uuid
-
class.toggle
-
forEach
5-Restaurant Order App
Visulation of the App
Description
- The project provides to list restaurant menu and order them. Users can able;
-
Get an order when clicked add button
-
Added multiple orders same time
-
List total price of orders
-
Complete orders by adding card details on a form
-