Giter Club home page Giter Club logo

encrypter-challenge-oracle-one's Introduction

ENCRYPTER-Challenge-Oracle-ONE

Main Page Encrypter Screen

GitHub Actions status GitHub Tag Version GitHub contributors GitHub last commit (master) GitHub commit activity GitHub language count GitHub top language GitHub code size in bytes GitHub repo file count Website GitHub deployments JavaScript CSS HTML GitHub forks


We are working hard on Encrypter v3. If you are new to this Web Aplication, read this document, then try using the Encrypter v2.3 website.

Older versions and the code are available at Encrypter versions.

Mark this repository with a Star ๐ŸŒŸ


๐Ÿ† Badges

Badge

๐Ÿ“ Index

๐Ÿ’ก Introduction

Project under development as a result of the first Challenge proposed by ONE (Oracle Next Education) and Alura Latam.

The Challenge consists of building a website that allows a user to encrypt and and decrypt the text that the user inserts and to present the result of the action chosen by the user in the corresponding encrypted or decrypted form.

Project Status ๐Ÿšฅ

๐Ÿšง Project under Construction ๐Ÿšง

Usage

This Web Aplication is a project for Encrypting messages, so you can exchange secret messages with other people who know the secret of the encryption used. To try the Encrypter Web Aplication last version click HERE!!

  • It must only work with lower case letters.
  • Letters with special characters shouldn't be used.
  • It must be posible to convert a word to the encrypted version, as well as return an encrypted word to its original version.
  • The website must have fields for insertion of the text that will be encrypted or decrypted, and the user must be able to choose between the two options.
  • The result of the action chosen by the user should appear on the screen.

Taking into account the freedom that the ONE program gave us to change the visual of the website, a curtain with a Matrix Effect was added to cover the ouput message immediately, giving the user a "sense of security". To see the message (encrypted or decrypted) it is only necessary to hover over the Matrix Curtain and it will gradually fade away.

Encryption ๐Ÿ”’

By inserting the message in the text field and clicking the Encrypt button , the web aplication will go through the text character by character looking to replace the present vowels with the following default codes:

The letter "e" becomes "enter"
The letter "i" becomes "imes"
The letter "a" becomes "ai"
The letter "o" becomes "ober"
The letter "u" becomes "ufat"

Decryption ๐Ÿ”“

In this case, the web aplication will go through the encrypted message looking for the key words, verifying that the subsequence characters are the same as the code shown above. If so, the key words will be replaced with the respective vowel as is indicated below:

The letter "enter" becomes "e"
The letter "imes" becomes "i"
The letter "ai" becomes "a"
The letter "ober" becomes "o"
The letter "ufat" becomes "u"

๐Ÿ”Ž Demostration

Encryption ๐Ÿ”’

INPUT OUTPUT
field fimesenterld
insert the message imesnsenterrt thenter menterssaigenter
oracle next education oberraiclenter nenterxt enterdufatcaitimesobern

Decryption ๐Ÿ”“

INPUT OUTPUT
ailufatrai laitaim alura latam
probergraimmimesng bentergimesnnenterr programming beginner
jaivaiscrimespt javascript

๐Ÿ’ป Tecnologies

For Development

  • HTML: The HyperText Markup Language is the standard markup language for documents designed to be displayed in a web browser.
  • JavaScript: is a versatile programming language that can be used to develop complex applications. Interpreters for JavaScript are integrated in all modern web browsers, so the language is considerably widespread.
  • CSS: Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML

For Versioning

  • GIT: Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.
  • GitHub: GitHub is an Internet hosting service for software development and version control using Git.

๐ŸŽจ Design

For this challenge, a base model in Figma was provided, leaving it up to the developer to decide whether or not to implement it. Allowing the developer to explore their creativity by choosing not to use the base model.

I decided to go for the base model provided, with only some changes like:

  • The template main color
  • Adding a Matrix Effect

Figma Design

Figma Base Model

Final Design

Main Page Encrypter Screen Main Page Encrypter Screen Footer

Final Design Matrix

Main Page Encrypter Screen Matrix

๐Ÿ’Ž Responsive Design

Taking into account the Figma base model of the website provided by ONE (Oracle Next Education) and Alura Latam, in which you could see the different sizes that the program was require to adapt, it was necessary to add some @media queries.

After the process of successfully creating the responsive design, we were left with an almost fully responsive website, the results of this process are shown below:

  • Screen Width Below 1040px

Screen Width Below 1040px

  • Screen Width Below 900px

Screen Width Below 900px

  • Screen Width Below 450px

Screen Width Below 450px

  • Screen Width Below 379px

Screen Width Below 379px

Download โฌ

๐Ÿ”ธ Fork

1- Fork the project. In the upper right, click the icon and the option Create a New Fork.

Create a New Fork

2- Once you have the repository forked in your account, check if the URL matches the repository name in your account.

Forked Repository

๐Ÿ”ธ Download ZIP

To download the .zip file click the code button then the download ZIP, when you already have the file you can extract the files.

Download ZIP

๐Ÿ”ธ Clone GIT

1- To Clone the repository, copy the highlighted URL on the image. https://github.com/waamir104/ENCRYPTER-Challenge-Oracle-ONE.git

Link Clone

2- Create a folder in your computer, open git bash and get in the folder, then insert the command line git clone and with the right button of the mouse in the terminal click the Paste button to paste the url then press the Enter key.

Git Bash

Secret Message โ—โ—

Decrypt our secret message!

thaink yoberufat venterry mufatch foberr renteraidimesng thenter dobercufatmenterntaitimesobern oberf thimess proberjenterct. imes hoberpenter yoberufat limeskenterd imest, ainy coberncenterrns coberntaict menter.

aind plenteraisenter rentermentermbenterr tober mairk thimessrenterpobersimestoberry wimesth ai stair. โญ

๐Ÿ“ง Contact

We have a few chanels for contact:

encrypter-challenge-oracle-one's People

Contributors

waamir104 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

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.