Giter VIP home page Giter VIP logo

djbowen95 / signature-password-generator Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 3.25 MB

Random password generator built in vanilla JavaScript. User interface built in HTML and CSS, with responsive design using media queries and flexbox.

License: Apache License 2.0

HTML 19.00% JavaScript 32.73% CSS 48.27%
css-flexbox vanilla-javascript javascript coding-bootcamp html css media-queries

signature-password-generator's Introduction

โœ๏ธ๐Ÿ”’ Signature Password Generator ๐Ÿ”’โœ

Secure Password Generator. Version 1.0.0

GitHub issues GitHub Deployed
Signature Password Generator is a simple web application that generates secure, random passwords. It is built in JavaScript, with simple functions that use the built in Math library and assorted array methods to provide users with a unique character string. The user interface is built in HTML and CSS with responsive design: it uses flexbox and media queries to achieve a great user experience on any device.

This project was built for the University of Birmingham and 2U/Trilogy Web Development Coding Bootcamp, in the third week of the course. It is a very simple project; I've built far more complex applications since...but I'd still love you take a look at my very first JavaScript project, and read about the things I learned on my first steps towards becoming a full-stack developer.

Table of Contents

Key Features

I plan to expand on this with short summaries of the features this project demonstrates and GIFs/code snippets that capture what I did. In the mean time, here are notes of some of the particular things I did/used:

  • CSS flexbox (nav bar, containers)
  • Responsive design (flexbox but also media queries)
  • Pseudo-classes (also wanna look at weeks 1 - 3 to try include everything)
  • (Not there yet but aim to make sure there is animation)
  • JavaScript Math library/object for randomisation
  • Iterators / array methods (concat especially)
  • Browser compatible JavaScript (no modularisation)

Version History

1.0.0 BootCamp Project

I want to keep a short account of what the project looked like when I first built it here. I have some images in the 'development images' folder to add when I fill out this section.

Contribution

This is a small portfolio project and while I have a few more ideas for its development, I would generally consider it to be finished. I am not actively seeking collaborative contribution but I am always open to hearing ideas! If there's a feature you'd like to see, or you'd like to help build, I'd love to hear your idea. Please open an issue and outline it! I'll be sure to get back to you as soon as I can.

To take a look at my other projects, or reach out to me more generally, please email me at [email protected] or use one of the links below:

signature-password-generator's People

Contributors

djbowen95 avatar

Watchers

 avatar

signature-password-generator's Issues

Replace prompts / alerts with sliders

One of the Bootcamp project requirements was to use the browser's built in prompts/alerts to collect user response. I would prefer to have a set of sliders contained on the page, which I think would be tidier.

Update README

I have created a style guide for the README files on my personal projects, and I would like to update this README in line with the guidance I set myself. I will be updating this project one section at a time - with a walkthrough of everything I learned for this project / hope it demonstrates!

Copy to Keyboard Button

Very simple feature - but I'd like a copy to Clipboard option for the password, on the right hand side of the password container.

Finish new HTML/CSS

This bootcamp project came with a simple prestyled webpage. I have been builting a new user interface so that I can call the project fully my own. To finish of the new page I need to:

  • Finish styling the navigation bar
  • Add the navbar links to my pages
  • Customise the fonts
  • Rebuild/style the password container element (maybe not as a textarea)
  • Ensure new password container is fully responsive
  • Create a 'hamburger' for the navbar links (currently they just display hidden)
  • Create a footer

I would also like to add some simple CSS animation to this project.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.