A playground project for JavaScript.

Related tags

Learning resource AwesomeBooks
Overview

Awesome books

Screenshot

AwesomeBooks

Built With

  • HTML
  • CSS
  • JS

Live Demo

Awesome books

Getting Started

To get a local copy up and running:

  1. Clone this repository or download the zip folder:

git clone https://github.com/rex-9/AwesomeBooks.git

  1. Navigate to the location of the folder in your machine:

you@your-Pc-name:~$ cd <folder>

To get a local copy up and running follow these simple example steps.

Deployment

Here is the online version of Awesome Books

Author

👤 - Github: rex-9
👤 - Linkedin: rex9
👤 - Angelist: rex9
👤 - Facebook: htetnaing0814

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check issue page.

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

Microverse

📝 License

This project is MIT licensed.

Comments
  • Awesome books with ES6 Modules

    Awesome books with ES6 Modules

    Setup the project:

    • Created a new directory and initialized it with git.
    • Used npm init -y command to create package.json file.
    • Created the entry point for the JavaScript code called index.js
    • Created index.css file for the styles.
    • Created the main index.html file. Linked the index.js and index.css files there.
    • Created a directory called modules.
    • Re-created my Awesome books app following the rules:

    Used ES6 syntax.

    • Divided the code into modules.

    • Saved each module in a separate file in the modules dir.

    • Imported modules in the index.js file.

    • Kept all functionalities of the app without errors.

    • Refactored my methods and functions to arrow functions.

    • Used let and const in a correct way.

    • Displayed the current date below the navigation bar.

    • Used a library Luxon

    • Download the script and saved it to the project.

    • Imported it as a module.

    opened by rex-9 0
  • Peer to peer code review

    Peer to peer code review

    Your code is very good and it's clear to understand. But here we have some suggestions to make your code better.

    • [ ] when the title and author are empty, it's better to show an error message and it doesn't add a new book.
    • [ ] It's better to add your contributor to the Readme me file Author Section.
    opened by sajjadrajaee 0
  • A complete website with navigation

    A complete website with navigation

    Modified the Awesome books application to have:

    • A Navigation bar.
    • Three content sections:
    • Books list.
    • Add book form.
    • Contact info.

    Used the given wireframe as a guide:

    • Made sure that when any of the links are clicked, the main area changes to display only one of the three content sections.
    • To change the contents of the page, didn't use any library or framework, use only plain JavaScript and CSS.
    opened by rex-9 0
  • Refactor to use JS classes

    Refactor to use JS classes

    • Used JavaScript classes instead of objects and arrays.
    • Use objects and arrays, but did it inside classes.
    • Created class methods to add and remove books.
    • Maintained all of the original functionality of the application.
    • Didn't use any library or framework, used only plain JavaScript.
    • Added CSS styles to the application to make it match the required wireframe:
    opened by rex-9 0
  • Plain JavaScript with objects

    Plain JavaScript with objects

    Implemented only a basic UI with plain HTML:

    • Created a collection that keeps a list of books.
    • Created a function to add a new book to the collection, with title and author.
    • Created a function to remove a book from the collection.
    • Displayed all books saved in the collection in the top part of the page.
    • When a user clicks the "Add" button:
    1. A new book is added to the collection.
    2. The new book is displayed in the page.
    • When a user clicks the "Remove" button:
    1. The correct book is removed from the collection.
    2. The correct book dissapears from the page.
    • Made sure that data is preserved in the browser's memory by using localStorage.

    Didn't use any library or framework, use only plain JavaScript.

    opened by rex-9 0
Owner
Htet Naing
A Friendly Spiritual Full-Stack Developer who loves meditation. ✨ Stack: JavaScript, Ruby, Rails, React, Redux, Laravel, Flutter. Looking for my next job!
Htet Naing
GitHub
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
A playground project for JavaScript.

Awesome books Screenshot Built With HTML CSS JS Live Demo Awesome books Getting Started To get a local copy up and running: Clone this repository or d

Htet Naing 14 Aug 25, 2022
Code Playground is a online application for testing and showcasing user-created and collaborational HTML, CSS and JavaScript code snippets

Code Playground About Code Playground is a online application for testing and showcasing user-created and collaborational HTML, CSS and JavaScript cod

Arshansh Agarwal 5 Dec 17, 2022
A simple playground to create and test your Katas in Typescript.

Kata Playground TS A simple playground to create and test your Katas in Typescript. A code kata is an exercise in programming which helps programmers

Willian Justen 23 Jan 20, 2022
⚡ Extremely fast online playground for every programming language.

Riju Riju is a very fast online playground for every programming language. In less than a second, you can start playing with a Python interpreter or c

Radon Rosborough 845 Dec 28, 2022
Rollup + React + Babel + Prettier + Strict ESlint and Stylelint + Sass + VSCode + Playground app - Enterprise grade boilerplate

React package boilerplate by HackingBay Rollup + React 17 + Babel + Prettier + Strict ESlint and Stylelint + Sass + VSCode + Playground app - Enterpri

HackingBay 2 Jan 19, 2022
A simple code playground

CodeeBox A simple code playground ?? Features: Instant change preview Saving without accounts or databases, everything's on the URL (Encoded) Resizabl

null 6 Nov 17, 2022
TypeScript playground plugin to save on format

TypeScript Playground Plugin TypeScript Playground plugin to save on format Running this plugin Click this link to install or Open up the TypeScript P

Anurag Hazra 8 Apr 11, 2022
An ergonomic, mobile-first, Prolog playground!

Paízo Programmer Pronounced "Pay-zo Programmer". https://lf94.github.io/paizo-programmer/ Paizo is a playground for programmers. It's intended to be u

Lee 30 Aug 13, 2022
A (very) minimalist creative coding playground. Make animations using only 64 HTML sliders!

Sliderland A (very) minimalist creative coding playground. Make animations using only 64 HTML sliders! Credits The recording feature uses ffmpeg.wasm

null 181 Dec 30, 2022
A Next.js playground to test Reanimated bundle size.

React Native Reanimated Tree Shaking Playground Here we can test react-native-reanimated's bundle size. ?? Discussion here ?? Progress here Instructio

Fernando Rojo 22 Jun 16, 2022
JS bindings and playground of post-quantum asymmetric ciphers

pqc.js Overview This project provides JS bindings and playground of post-quantum asymmetric cipher compiled to WebAssembly using emscripten with a fal

Dashlane 7 Oct 30, 2022
Playground for studying design patterns, solid principles, GoF, testing and more with TypeScript

TypeScript design patterns study Playground for studying design patterns, solid principles, GoF, testing and more with TypeScript Index TypeScript des

Lucas Souza 9 Dec 9, 2022
js move playground by imcoding.online

JS MOVE PLAYGROUND Wrapper move playground by pontem. Only support Browser environment. Demo imcoding.online Install npm i @imcoding.online/js-move-pl

imcoding.online 14 Dec 3, 2022
Leader Board is a simple project based on JavaScript programing language. The purpose of this project is to work with APIs and ASYNC & AWAIT methods. I have used vanilla JavaScript with web pack to implement this project

Leader Board - JavaScript Project Table of contents Overview The challenge Screenshot Links Project Setup commands My process Built with What I learne

Mahdi Rezaei 7 Oct 21, 2022
The project is a To-Do list project to help plan daily, weekly or monthly activity. I used Html, CSS and JavaScript Technology to execute the project.

<<<<<<< HEAD To Do List This project is geared towards applying acguired skills for development of my porfolio through the following practices: Create

Victor Efosa Osagie 6 Dec 19, 2022
This is my to-do list website built with html, css and JavaScript. In this project I used Webpack to bundle JavaScript and ES6 modules to write modular JavaScript.

To-Do-List App This is my to-do list website built with html, css and JavaScript. In this project I used Webpack to bundle JavaScript and ES6 modules

Samuel Mwape 18 Sep 20, 2022
Awesome Books. In this project, I built a basic website that allows users to add/remove books from a book list. This project is build with JavaScript.

Event Page Awesome Books. In this project, I built a basic website that allows users to add/remove books from a book list. Built With HTML CSS JavaScr

Miftah Amin 16 Feb 28, 2022
This project displays the art collection using the Metropolitan Museum of Art API. For this project we used HTML, CSS, Javascript, Webpack and Jest.

Metropolitan Museum of Art This project displays the art collection using the Metropolitan Museum of Art API. For this project we used HTML, CSS, Java

David Vera Castillo 11 Dec 24, 2022