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 π
- ENCRYPTER-Challenge-Oracle-ONE
- Badges
- Introduction
- Project Status
- Usage
- Demostration
- Tecnologies
- Design
- Responsive Design
- Download
- Secret Message
- Contact
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 under Construction π§
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.
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"
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"
INPUT | OUTPUT |
---|---|
field |
fimesenterld |
insert the message |
imesnsenterrt thenter menterssaigenter |
oracle next education |
oberraiclenter nenterxt enterdufatcaitimesobern |
INPUT | OUTPUT |
---|---|
ailufatrai laitaim |
alura latam |
probergraimmimesng bentergimesnnenterr |
programming beginner |
jaivaiscrimespt |
javascript |
- 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
- 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.
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
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 900px
- Screen Width Below 450px
- Screen Width Below 379px
1- Fork the project. In the upper right, click the icon and the option 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.
To download the .zip file click the code button then the download ZIP, when you already have the file you can extract the files.
1- To Clone the repository, copy the highlighted URL on the image.
https://github.com/waamir104/ENCRYPTER-Challenge-Oracle-ONE.git
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.
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.
β
We have a few chanels for contact: