Table of contents

• Overview

• Projects

  • 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