Seven Segment Display javascript

https://codepen.io/guldus/pen/NVgvwr?editors=0110 https://codepen.io/guldus/pen/NVgvwr?editors=0110 CODE <div id="canvasWindow" style=" position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); "> </div> <script> /* sources: wikipedia: https://en.wikipedia.org/wiki/Seven-segment_display w3schools: https://www.w3schools.com/js/js_bitwise.asp youtube: https://www.youtube.com/watch?v=MlRlgbrAVOs&list=WL&index=31&t=0s hexadecimal encodings: 0 ---> 0x73 1 ---> 0x30 2 ---> 0x6D 3 ---> 0x79 4 ---> 0x33 5 ---> 0x5B 6 ---> 0x5F 7 ---> 0x70 8 ---> 0x7f 9... Continue Reading →

17 May 2019 0

React applications with Lazy Loading

React applications with Lazy Loading GitHub: https://github.com/Furkan-Gulsen/ReactJS-Small-Projects CODE app.js import React, {Component} from 'react'; import data from "./components/data"; import LazyLoad from 'react-lazyload'; import './App.css'; const Loading = () => ( <div className="alert alert-dark" role="alert"> Loading .... </div> ) const Post = ({id,title,body}) => ( <div className="post" style={{width: "540px",margin:"0 auto"}}> <div className="card mb-3" style={{width: "540px"}}> <div... Continue Reading →

16 May 2019 0

I Love You 3000

OVERVIEW: https://codepen.io/guldus/pen/WBeOPZ https://codepen.io/guldus/pen/WBeOPZ HTML <div class="thanos"> <div class="but">Stop! <img> </div> <div class="thanks">I LOVE YOU 3000</div> <div class="all"> <div class="ironMan"></div> <div class="particle"></div> </div> </div> CSS @import url('https://fonts.googleapis.com/css?family=Marvel'); body{ padding: 0; margin: 0; width: 100%; height: 100vh; overflow: hidden; font-family: 'Marvel', sans-serif; } .ironMan{ width: 400px; height: 500px; background-image: url("58569ca74f6ae202fedf2752.png"); background-size: cover; position: absolute; bottom: 0px; left:... Continue Reading →

3 May 2019 0

Array Login System

https://codepen.io/guldus/pen/MRxGvo?editors=1010 https://codepen.io/guldus/pen/MRxGvo?editors=1010 HTML <div id="log_box"> <h2 class="text-center">Array Login System</h2> <input type="text" id="username" class="form-control" placeholder="username"> <input type="text" id="password" class="form-control" placeholder="password"> <button id="but" class="btn btn-dark form-btn btn-block">CLICK</button> <div class="alert alert-danger mt-3" role="alert" id="danger" style="display: none"></div> <div class="alert alert-success mt-3" role="alert" id="success" style="display: none"></div> </div> CSS #log_box{ width: 400px; margin: 250px auto; } input,button{ margin-top: 10px; } input{... Continue Reading →

28 April 2019 0

JSON Users (Modal Box)

Github:https://github.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/tree/master/Users%20(Modal%20Box) HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CARD GAME</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <link rel="stylesheet" href="\css\main.css"> <script src="/javascript/main.js"></script> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div id="backWall"> <div id="modalBox"> <img id="img" alt="person" src=""> <h3 id="fullName">s</h3> <div>ID: <label id="id"></label></div> <div>Age: <label id="age"></label></div> <div>From:... Continue Reading →

28 April 2019 1

JavaScript JSON Login System

HTML CODE <div id="log_box"> <h2 class="text-center">JSON Login System</h2> <input type="text" id="username" class="form-control" placeholder="username"> <input type="text" id="password" class="form-control" placeholder="password"> <button onclick=run() class="btn btn-dark form-btn btn-block">CLICK</button> </div> CSS CODE #log_box{ width: 400px; margin: 250px auto; } input,button{ margin-top: 10px; } input{ border: 2px solid rgba(0,0,0,.5) !important; padding: 20px !important; } h2{ padding-bottom: 15px; } JavaScript function run(){... Continue Reading →

27 April 2019 0

Spam Browser (javascript)

OVERVIEW https://codepen.io/guldus/pen/LvMzJy https://codepen.io/guldus/pen/LvMzJy Github:https://github.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/tree/master/spam%20find HTML <div class="container"> <div id="box"> <h1 class="text-center mt-5 pb-3">Lorem Ipsum</h1> <p id="text" > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac hendrerit neque. Phasellus cursus at neque in tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas lacinia ex ac nulla ullamcorper feugiat.... Continue Reading →

26 April 2019 0

JS CLASS – Login System

OVERVIEW https://codepen.io/guldus/pen/KYBYXj https://codepen.io/guldus/pen/KYBYXj Github: https://github.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/tree/master/JS%20CLASS%20-%20Login%20System HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CARD GAME</title> <link rel="stylesheet" type="text/css" href="/main.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div id="login_table"> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text"><i class="fas fa-user"></i></span> </div> <input type="text"... Continue Reading →

23 April 2019 2

JS Class Inheritance Example

class People_Info{ constructor(id,name,surname,age,salary){ this.id = id; this.name = name; this.surname = surname; this.age = age; this.salary = salary; }; print(){ console.log(` id: ${this.id} name: ${this.name} surname: ${this.surname} age:${this.age} salary: ${this.salary}`); }; }; let jack = new People_Info(1,"Jack","Queen",27,6000); jack.print(); let maria = new People_Info(2,"Maria","Allen",30,7800); maria.print(); id: 1 name: Jack surname: Queen age:27 salary: 6000 id: 2... Continue Reading →

18 April 2019 0

Bootstrap Library System

Overview https://codepen.io/guldus/pen/YMWeLe Github: https://github.com/Furkan-Gulsen/Library-System HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="description" content="Free Library System"> <meta name="keywords" content="Library System, Book System"> <meta name="author" content="Codeblogger"> <title>Library System</title>  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!--... Continue Reading →

6 April 2019 1