Javascript-Projects

KO | EN

gitlite — search

#javascript #hacktoberfest #ai #typescript #llm #android #rust #macos #java #awesome #cli #kubernetes #awesome-list #vue

Javascript-Projects

(★ 10)

No description available.

Javascript-Projects Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Javascript-Projects

## 01 - Basic-Calculator

This web apllication is calulator as you can undersdand from name. 
There is only thing  different compare to other calculators that is only one input  involves in this application. 
First you pass a number into input than select the operation. And it continues so on.

Main goal is:
- Introduction to Javascript
- Learning introduction to DOM

Link of the website: https://batuhanbay.github.io/Javascript-Projects/Basic%20Calculator/

## 02 - Dice Game-v1

The website which is a game, has been builded for practising Document Object Model. When we refresh  web site then  dice get thrown randomly.
After that player 1 and player 2 both have their own dice values, and  web site will announce a winner depending on whose dice value was higher.
For playing game again reflesh the web site.

Main goal is:
- Introduction to DOM.
- Learning how to select and manipulate elements in  web site on the fly using.

Link of the website: https://batuhanbay.github.io/Javascript-Projects/Dice%20Game-v1/dicee.html

## 03 - Dice Game-v2

There are two players and the game is played in rounds in this project. In each turn, a player rolls a dice as many times as the player wishes and each result gets added to player's round score.
But if the player rolls a 1, then all player's round score gets lost and after that then it's the next player's turn.
But in order to avoid that, the player can choose to hold which means that his round score gets added to his global score.
After that, it's again the next player's turn. At the end the first player to then reach 100 points on the global score wins the game.

Main goal is:

- Make JavaScript interact with a webpage
- Practise with DOM manipulation.
- Practise with creating fundamental variables.

Link of the website: https://batuhanbay.github.io/Javascript-Projects/Dice%20Game-v2/

## 04 - Rock Paper Scissors

The website which is a game, has been builded for practising with Javascript and begginer approach of Document Object Model. When the user press  to start game button,
There is gonna be prompt which waits input from user such as Rock,Scissor or Paper. Also input is not requires "case-sensevitive".Than user has to press "OK" button. 
After that computer will pick the one of Rock,Scissor or Paper.Finally, There is gonna be result which is alert involves text.

Main goal is:
- Practice with Javascript
- Learn approaching DOM
- Practise with conditional (ternary) operator.

Link of the website: https://batuhanbay.github.io/Javascript-Projects/Rock%20Paper%20Scissors

## 05 - Drum Kit

On the website, There is number of keys that represent different drums as a button in a typical drum set. When user click on any of these buttons, user will get the corresponding sound of the drum.
In addition user can also use the keys on the keyboard(w,a,s,d,j,k,l) in order to get corresponding sound of the drum.

Main goal is:
- Learning intermediate parts of the Document Object Model.
- Understanding that how to add event listeners to buttons and keystrokes.

Link of the website: https://batuhanbay.github.io/Javascript-Projects/Drum%20Kit/

## 06 - Filter Movie

The idea of this  application is that user have  input areas on header where a user can enter a title of a favorite movie 
and then an extra information where the user can set the name of the property and then the value of the property.
And than if user click "add movie" button ,  movie with  information which has been added by user, should be added and output  at below of header in a list of movies where output the title and also the extra information.
In addition, there is a search bar  where user can enter some  term of a word and then search for that
and if the title of a movie includes that search term, application should be  output that movie.

Main goal is:

- Practise with DOM manipulation 
- Practise with rendering elements based on Objects
- Practise with square bracket notation.
- Practice with event listener.

Link of the website: https://batuhanbay.github.io/Javascript-Projects/Filter%20Movie/

## 07 - Keep Favorite Book

This web site which has been builded , is simple application where user can click add book and display them.
When the user click "ADD BOOK" button , an overlay should open up
where user can  enter the title of user's favorite book,
add an image and also give it a rating.
After that user click "add" button, application will  display a list of the books after user switch off overlay by clicking space or "cancel" button. 
Moreover, User is also be able to click on the books
and then remove them if user want to get rid of them after they were added.

Main goal is:

- Practice with dynamically create and remove elements by using document object model.
- Practise with DOM Querying.
- Practise with styling DOM Elements.
- Practise with fetching and validating user input.

Link of the website: https://batuhanbay.github.io/Javascript-Projects/Keep%20Favorite%20Movie/

## 08 - Memorize Game

The Website has been builded as a game that is modeled off the game Simon. The Way that it works is that user can press any key to start and it will show to user a tile that you have to click on.
Then as user go from level to level, the patterns get more and more complicated. Once and for all, it is going to tell you that game is over when you have got it wrong pattern.
After that you can press any key to restart the game.

Main goal is:
- Introduction to jQuery.
- Manipulating Styles , Text , HTML Attributes with jQuery.
- Adding Event Listeners with jQuery.

Link of the website: https://batuhanbay.github.io/Javascript-Projects/MemorizeGame/

## 09 - Review Movie

In this project ,The goal is that write client-side HTML and Javascript that will interact with an open web API called The Open Movie Database (http://www.omdbapi.com/). 
User Javascript will request movie data from the API, populate the web page with movie data, and allow the user to add reviews for the movie onto the page. 
When the page reloads, as page of user has not connected  to a server (yet), the review data the user creates on user's page will be lost

Main goal is:

- Practice using Javascript for client-side programming
- Practice performing asynchronous requests using XMLHttpRequest
- Implement a client that interacts with a server to retrieve new information to include in an HTML page
- Practise with API

Link of the website: https://batuhanbay.github.io/Javascript-Projects/Reviews%20Movie/

## 10 - Budget Calculator

This app allows user to add incomes and expenses for a certain month. 
Also the app then calculates how much money user has made,
and how much user spent, then it gives to user a nice budget  in header section.
if the user make some kind of mistake, or just want to remove an item here from the list,
user just need to click on icon appear as user hover over income or expense items.

Main goal is:

- Learn what the Module Pattern is and how to implement and learn it in JavaScript.
- Learn more about private and public data, exposing methods, encapsulation, and separation of concerns,
  and how all data is related to the module pattern.

Link of the website: https://batuhanbay.github.io/Javascript-Projects/Budget%20Calculator/

## 11 - Introduction To Node-v1

In this application has been builded for  write Javascript code and execute it to affect computer, including
manipulating and reading and writing to local file system by using Node.js.
There is a pure simple text file which is called file1.txt in the project. There is  little bit of text in this file.
Application will use method which called copyFileSync which is in file system module, in order to create a copy of my file1.

Main goal is:
- Read and understand documentation of Node.js.
- Learning how to access and manipulate the local files by using Node.js.
- Learning how to use native Node modules that is bundled with Node.js

## 12 - Introduction To Node-v2

Application which has been builded for generate superhero names randomly and log it in console.

Main goal is:
- Learning NPM  for external modules in order to incorporate packages into projects.
- Learning how to initialize NPM.
- Understand the process of  package file how it is working.

## 13 - BMI Calculator

Web application, with a server using Node and Express to create a simple web site that acts as a calculator and BMI calculator,
In order to use this web application which is for calculator enter two numbers and hit calculate button than get the result back on web site.
For BMI calculator, firstly go to /bmicalculator route enter your weight and height than hit calculate button than get the result back on web site as well.

Main goal is:
- Learn how to make code run in server side.
- Learning create server with Express.
- Learn handling request and responses (GET request).
- Understanding and Working with Routes.
- Learn responding to requests with HTML Files.
- Learn processing post requests with Body Parser.

## 14 - Weather Condition

Web application which displays to the user the temperature of a particular location that they are interested
in, and also display a weather symbol for the weather conditions on the page.

Main goal is:
- Learning API Endpoints, Paths and Parameters.
- Learning API Authentication and Postman.
- Learn regarding theory of JSON.
- Making GET Requests with the Node HTTPS Module.
- Learn how to parse JSON.
- Using Express to render a website with live API data.

## 15 - Sign Up-v0 && Sign Up-v1

This is an actual HTTPS web site  that has been builded for a newsletter app.
Also, application is all down to integration with MailChimp and MailChimp APIs
Moreover, it is a single page web site that looks nice on the front-end and it looks  simple
on the backend.
Application has some powerful functionality that will allow to sign people up to my mailing list on MailChimp.
In order to use this app , user clicks to the sign up button once than if it was successful then user gets taken to the success page, and if it was not
then user will get a failure page.

Main goal is:
- Practise with Bootstrap on front-end
- Practise with Express and Body Parser.
- Practise with  handle requests and responses for GET and POST request.
- Learning and practise about connection between frontend and backend.
- Getting exprerience about set web page up with the MailChimp API to send data over to MailChimp servers.

## 16- Todolist-v1

This project is To Do list application which shows user to the current date and month at the top of site and get to check off your to do list items.

Main goal is:
- Practise with Express and Body Parser.
- Learning about theory of templates and practise with creating EJS Template.
- Learning by reading documentation of EJS and practise how to run code inside the EJS Template on project.
- Practising with passing data from webpage to server.
- Understanding Node Module Exports (How to pass functions and data between files).

## 17- Blog Website

This is a beautiful personal blog or personal diary website.
There is three pages which is home, about, contact and a compose page for post blog on home page.
In order to post blog firstly user needs to go /compose route than enter title of the post and content of the post.
Lastly user needs to click publish button. Once user click publih button, user's blog goes to home page.
For reading any blog which has been posted on home page, there is a "Read More" button which is  for show up the post on dynamic blog page.

Main goal is:

Part-1
- Practise with Express and Body Parser.
- Practise with templates and creating EJS Template.
- Practising with passing data from webpage to server.

Part-2
- Learning and practise with connect it with Mongoose
- Learning add new item to Database.
- Learning find item in database and render it on page.
- Learning create custom posts using Express route parameters.
- Practise about connection between frontend and backend.

## 18- Todolist-v2

This project is To Do list application which shows user to the current date and month at the top of site and get to check off your to do list items.

Main goal is:

- Practising with connect it with Mongoose.
- Practising about rendering database items in the application.
- Practising about adding new items to database.
- Practising about deleting items from database.
- Practising about creating custom lists using Express route parameters.
- Learning and practising with Lodash and deleting items from custom ToDo lists.

## 19- Wiki-API

This project has been builded for a Wikipedia style API in order to build my own RESTful API.
There is bunch of data relating to subjects which I have learned so far.
I have used 3T Studio for connection to database. Beside using 3T Studio, I have used POSTMAN for making GET, POST, PATCH and DELETE operations.
In order to see this datas , user needs to make request /articles route.
As well as seeing all datas if user would like to see specific data, user needs to make request /articles/articleTitle such as /articles/DOM

Main goal is:

- Learning that what is REST?
- Learning and practising about creating a Database with Robo 3T.
- Practising about set up the server.
- Practising with GET, POST, DELETE, PUT, PATCH operations according to user request.
- Learning and practising about chained route handlers by using Express.

## 20- Sign Up-v2

This is the application which is a demo of Whisper website. Application is a really simple concept basically
allows users to submit their secrets anonymously. Structure of the website is simple.
It has a home page which has two buttons that allows user to either go towards register or go towards
log in and once the user has been registered or logged in and they have been authenticated then they
are able to access the secrets page.

Main goal is:

- Introduction to Authentication and Security.
- Practising with database topics such as CRUD operations.
- Practising about set up the server.
- Practising about connection between frontend and backend.

Part-1
- Learning and practising about register users with username and password.

Part-2
- Learning and practising about database encryption.
- Learning and practising about using environment variables to keep secrets safe.

Part-3
- Learning and practising about hashing passwords.

Part-4
- Learning and practising about salting and hashing passwords with bcrypt.

Part-5
- Learning that what are cookies and sessions?
- Learning and practising about using Passport.js to add cookies and sessions.

Javascript-Projects

Javascript-Projects Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Javascript-Projects

Javascript-Projects Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README