├── README.md ├── Form.js ├── Form.css └── Form.html /README.md: -------------------------------------------------------------------------------- 1 | # Simple-Resume-Builder 2 | Here, is an simple Resume builder used as an basic step for the Updated versions of the resume builder. 3 | -------------------------------------------------------------------------------- /Form.js: -------------------------------------------------------------------------------- 1 | document.getElementById('resumeForm').addEventListener('submit', function(e) { 2 | e.preventDefault(); 3 | 4 | const fullName = document.getElementById('fullName').value; 5 | const email = document.getElementById('email').value; 6 | const phone = document.getElementById('phone').value; 7 | const address = document.getElementById('address').value; 8 | const summary = document.getElementById('summary').value; 9 | const education = document.getElementById('education').value; 10 | const experience = document.getElementById('experience').value; 11 | const skills = document.getElementById('skills').value; 12 | 13 | const resumeOutput = ` 14 |

${fullName}

15 |

Email: ${email}

16 |

Phone: ${phone}

17 |

Address: ${address}

18 |

Professional Summary

19 |

${summary}

20 |

Education

21 |

${education}

22 |

Work Experience

23 |

${experience}

24 |

Skills

25 |

${skills}

26 | `; 27 | 28 | document.getElementById('resumeOutput').innerHTML = resumeOutput; 29 | }); 30 | -------------------------------------------------------------------------------- /Form.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, sans-serif; 3 | background-color: #f4f4f4; 4 | margin: 0; 5 | padding: 0; 6 | } 7 | 8 | .container { 9 | width: 50%; 10 | margin: 0 auto; 11 | background: white; 12 | padding: 20px; 13 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 14 | border-radius: 8px; 15 | margin-top: 50px; 16 | } 17 | 18 | h1 { 19 | text-align: center; 20 | margin-bottom: 20px; 21 | } 22 | 23 | .form-group { 24 | margin-bottom: 15px; 25 | } 26 | 27 | label { 28 | display: block; 29 | margin-bottom: 5px; 30 | } 31 | 32 | input[type="text"], 33 | input[type="email"], 34 | input[type="tel"], 35 | textarea { 36 | width: 100%; 37 | padding: 10px; 38 | margin-top: 5px; 39 | border: 1px solid #ccc; 40 | border-radius: 4px; 41 | box-sizing: border-box; 42 | } 43 | 44 | button { 45 | width: 100%; 46 | padding: 10px; 47 | background-color: #007BFF; 48 | color: white; 49 | border: none; 50 | border-radius: 4px; 51 | cursor: pointer; 52 | font-size: 16px; 53 | } 54 | 55 | button:hover { 56 | background-color: #0056b3; 57 | } 58 | 59 | #resumeOutput { 60 | margin-top: 20px; 61 | padding: 20px; 62 | background-color: #e9ecef; 63 | border-radius: 4px; 64 | } 65 | -------------------------------------------------------------------------------- /Form.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Resume Form 7 | 8 | 9 | 10 |

11 |

Resume Builder

12 | 47 |

48 |

49 | 50 | 51 | 52 | --------------------------------------------------------------------------------